<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>header</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>

<!-- 1.最上方的logo跟登陆 -->
<div class="container" style="height: 50px;" th:fragment="logo-login-bar">
    <style>
        .a-color {
            color: white;
        }

        .bg-blue{
            background-color: #3B99FC;
        }
        .blue{
            color: #3B99FC;
        }

    </style>
    <div class="row" style="margin-top: 10px;">
        <!-- 这是logo图片 -->
        <div class="col-md-2" style="margin-top: 2px;">
            <a th:href="@{/index}">
                <img src="/img/logo.png" class="img-rounded" alt="图片无法加载">
            </a>
        </div>
        <div class="col-md-2" style="margin-top: 10px;">
            <a th:href="@{/index}" style="margin-top: 3px; text-decoration: none;" class="blue">
                <i class="h4" style="text-decoration: none;"><b>山卡拉火车12354</b></i>
                <br>
                <small>&nbsp;-- 假的火车网</small>
            </a>
        </div>
        <!-- 这是右上角的导航栏 -->
        <div class="col-md-6 col-md-offset-2" >
            <ul class="nav nav-pills">

                <li shiro:guest=""><a th:href="@{/login}" class="blue">登陆</a></li>
                <li shiro:guest=""><a th:href="@{/register}" class="blue">注册</a></li>
                <style>
                    a{
                        color: #3B99FC;
                    }
                </style>
<!--                登陆后显示用户名-->
                <li shiro:authenticated="" style="font-size: 18px;" class="blue">
                    <a shiro:principal="" style="color: #3B99FC"></a>
                </li>

                <li class="dropdown" id="dropdown_01">
                    <a href="javascript:;" class="dropdown-toggle blue" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user "></span>
                            我的账号
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/detail/page/1}" >用户信息</a></li>
                        <li><a th:href="@{/detail/page/2}" >账户安全</a></li>
                        <li shiro:authenticated=""><a th:href="@{/user/logout}" >注销</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle blue" data-toggle="dropdown">
                        简体中文
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                    </ul>
                </li>

                <li>
<!--                       data-container="body" data-toggle="popover" data-placement="bottom"-->
<!--                       data-content="+86 12354"-->
                    <a type="" href="http://localhost:8081" class="blue" title="联系电话："
                    >
                        <span class="glyphicon glyphicon-earphone"></span>&nbsp;联系我们
                    </a>
                </li>

                <script>
                    // 让联系我们有弹出信息的功能
                    $(function (){
                        $("[data-toggle='popover']").popover();
                    });
                </script>
            </ul>
        </div>
    </div>
</div>

<!-- 2.导航栏 -->
<div class="bg-blue" style="margin-top: 5px;height: 49px;">
    <div class="container h4 ">
        <nav class="navbar navbar-info" role="navigation">
            <div class="">
                <a class="navbar-brand a-color" th:href="@{/index}"><span class="glyphicon glyphicon-home"></span>  首页</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle a-color" data-toggle="dropdown">
                            预定
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="a-color"><a th:href="@{/ticket}">预定车票</a></li>
                            <li class="divider a-color"></li>
                            <li><a class="a-color" th:href="@{/detail/page/3}">退票</a></li>
                            <li class="divider"></li>
                            <li><a class="a-color" th:href="@{/detail/page/3}">改签</a></li>
                            <li class="divider"></li>
                            <li><a class="a-color" th:href="@{/detail/page/3}">改签修改目的地</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle a-color " data-toggle="dropdown">
                            旅行指导
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header"> -- 关于购票 -- </li>
                            <li><a th:href="@{/guide}">什么是真名购票</a></li>
                            <li><a th:href="@{/guide}">有多少种火车票</a></li>
                            <li><a th:href="@{/guide}">了解更多</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header"> -- 关于改签 -- </li>
                            <li><a th:href="@{/guide}">什么是改签</a></li>
                            <li><a th:href="@{/guide}">改签的规则有哪些</a></li>
                            <li><a th:href="@{/guide}">了解更多</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>


</body>
</html>